<template>
  <div>
      <div>
        <p class="fwbold fs-md mg20">· 我购买的服务订单</p>
        <el-divider></el-divider>
      </div>
      <div v-if="!isShowDetail" class="orderManage">
        <div class="order-list">
          <el-tabs type="border-card" v-model="activeIndex" style="flex: 1;" @tab-click="queryOrder">
            <el-tab-pane v-for="(value, index) in tablist" :key="index" :label="value.dictLabel" :name="value.dictValue">
              <el-table :data="tableData" style="width: 100%">
                <el-table-column label="订单编号" prop="orderId"></el-table-column>
                <el-table-column label="服务产品名称" prop="productName"></el-table-column>
                <el-table-column label="服务商" prop="serviceName"></el-table-column>
                <el-table-column label="下单时间" prop="orderTime" width="200">
                  <template slot-scope="{ row }">
                    {{ formatDate(row.orderTime) }}
                  </template>
                </el-table-column>
                <el-table-column label="合同金额(元)" prop="price">
                      <template slot-scope="{ row }">
                        {{ row.price ? $priceToThousands(row.price) : $priceFormat(row?.estimatedPrice?.limitOriginalPrice,row?.estimatedPrice?.upperOriginalPrice)}}
                      </template>
                </el-table-column>
                <el-table-column label="补贴金额(元)" prop="discountPrice">
                      <template slot-scope="{ row }">
                        {{ row.discountPrice ? $priceToThousands(row.discountPrice): $priceFormat(row?.estimatedPrice?.limitDiscountPrice,row?.estimatedPrice?.upperDiscountPrice) }}
                      </template>
                </el-table-column>
                <el-table-column label="服务状态">
                  <template slot-scope="scope">
                    <p v-if="scope.row.status === 0" class="color-red">待接单</p>
                    <p v-else-if="scope.row.status === 1" class="color-yellow">待签合同</p>
                    <p v-else-if="scope.row.status === 2" class="color-yellow">待支付</p>
                    <p v-else-if="scope.row.status === 3" class="color-red">待服务</p>
                    <p v-else-if="scope.row.status === 4" class="color-red">待完成</p>
                    <p v-else-if="scope.row.status === 5" class="color-green">待评价</p>
                    <p v-else-if="scope.row.status === 6" class="color-red">订单取消</p>
                    <p v-else-if="scope.row.status === 7" class="color-green">评价完成</p>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="180">
                  <template slot-scope="scope">
                    <el-button type="text" @click="goToDetail(scope.row)">查看</el-button>
                    <el-button v-if="scope.row.status === 0 || scope.row.status === 1 || scope.row.status === 2"  type="text" class="color-red ml10" @click="handleCancel(scope.row)">取消订单</el-button>
                    <el-button v-if="scope.row.status === 2" type="text" class="ml10"
                      @click="goToDetail(scope.row)">支付</el-button>
                    <el-button v-else-if="scope.row.status === 5" type="text" class="ml10"
                      @click="goToDetail(scope.row)">评价</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="row-end mt20 mb20">
                  <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[12, 20, 32, 40]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                  </el-pagination>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <div v-else class="orderDetail">
        <CouponOrderDetail ref="CouponOrderDetail"  @back="goBack" :orderStep="selectedOrderStatus" :orderId="selectedOrderId"></CouponOrderDetail>
      </div>
  </div>
</template>
<script>
import CouponOrderDetail from './couponOrderDetail.vue'
import { getOrderList,cancelOrder } from '@/api/homeApi'
import moment from 'moment';
export default {
  data() {
    return {
      // 0-待接单 1-待签合同 2-待支付 3-待服务 4-待完成 5-待评价 6-订单取消 7-评价完成
      activeIndex: 'all',
      tableData: [
      ],
      isShowDetail: false,
      tablist:[
        {"dictLabel": "全部","dictValue": "all"},
        {"dictLabel": "待接单","dictValue": "0"},
        {"dictLabel": "待签合同","dictValue": "1"},
        {"dictLabel": "待支付","dictValue": "2"},
        {"dictLabel": "待服务","dictValue": "3"},
        {"dictLabel": "待完成","dictValue": "4"},
        {"dictLabel": "已完成","dictValue": "5"},
        {"dictLabel": "订单取消","dictValue": "6"},
        {"dictLabel": "评价完成","dictValue": "7"}
      ],
      selectedOrderStatus: 0,
      selectedOrderId: '',
      currentPage: 1,
      pageSize: 20,
      total: 10,
      status:null
    }
  },
  components: {
     CouponOrderDetail
  },
  computed: {

  },
  mounted () {
    this.getOrderList()
    this.checkQueryParams()
  },
  methods: {
    formatDate(date) {
      return moment(date).format('YYYY-MM-DD HH:mm:ss');
    },
    handleSelect() {
    },
    checkQueryParams() {
      const orderId = this.$route.query.orderId;
      const status = this.$route.query.status;
      if (orderId && status == 0) {
        this.selectedOrderStatus = status;
        this.selectedOrderId = orderId;
        this.isShowDetail = true;
      }
    },
    goToDetail(row) {
      this.selectedOrderStatus = row.status;
      this.selectedOrderId = row.orderId;
      this.isShowDetail = true
    },
    handleCancel(row) {
      this.$confirm('确定取消订单吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        cancelOrder({orderId:row.orderId}).then(res=>{
          if(res.code === 200){
            this.$message({
              type: 'success',
              message: '取消成功!'
            });
            this.getOrderList()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消取消'
        });
      });
    },
    goBack() {
      this.isShowDetail = false
      this.getOrderList()
    },
    queryOrder(val) {
      if(val.name === 'all'){
        this.getOrderList('')
        this.status = ''
      }else{
        this.getOrderList(val.name)
        this.status = val.name
      }
    },
    getOrderList(status=''){
      getOrderList({pageNo:this.currentPage,pageNum:this.pageSize,type:0,status}).then(res => {
         if(res.code === 200){
           this.tableData = res.rows
           this.total = res.total
          }
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getOrderList(this.status)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getOrderList(this.status)
    },
  }
}
</script>

<style lang="scss" scoped>

:deep .el-divider--horizontal {
  margin: 12px 0;
}

:deep .el-menu--horizontal>.el-menu-item.is-active {
  border-bottom-color: #D32521;
}

:deep .el-table thead {
  color: #000;
}

.orderManage {
  height: 100%;
  ::v-deep .el-tabs__item {
    min-width: 120px;
    text-align: center;
  }

  .order-list {
    padding:10px 30px 30px;    
    height: 100%;
  }
}
</style>
